.var_transition{
  background: #eee;
  font: 500 14px sans-serif;
  color: #333;
  line-height: 1.5;
  
  .blue-container{
    background: #64B5F6;
    padding-left: 50px;
  }

  .green-container{
    background: #AED581;
    padding-left: 50px;
  }

  .container{
    background: #fff;
    padding: 20px;
  }

  p{
    transition: 0.4s;
  }

  .title{
    font-weight: bold;
  }

  .blue-container{
    --title-text: 18px;
    --main-text: 14px;
  }
  .blue-container:hover{
    --title-text: 24px;
    --main-text: 16px;
  }
  .green-container:hover{
    --title-text: 30px;
    --main-text: 18px;
  }
  .title{
    font-size: var(--title-text);
  }
  .content{
    font-size: var(--main-text);
  }
}
